<%@ page contentType="text/html;charset=UTF-8" language="java"
         import="entity.Product,entity.User,entity.Review" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>商品详情</title>
    <link rel="stylesheet" href="../css/productCss.css">
</head>
<body>
    <jsp:include page="Header.jsp"></jsp:include>
    <div id="nav">
        <nav class="breadcrumb" style="padding-left:100px;">
            <a class="breadcrumb-item" href="/">首页</a>
            <span class="breadcrumb-item">分类</span>
            <span class="breadcrumb-item">商品详情</span>
            <span class="breadcrumb-item active">${sessionScope.product.getProductName()}</span>
        </nav>
    </div>
    <div id="product" class="container">
       <div id="top">
           <div id="left">
               <img src="${sessionScope.product.getDefaultImg()}" title="${sessionScope.product.getProductName()}" width="300px" height="350px">
           </div>
           <div id="right">
               <h3>${sessionScope.product.getProductName()}</h3>
               <hr>
               <h6 style="color:red;">${sessionScope.product.getNote()}</h6>
               <p>状态
                    <c:if test="${sessionScope.product.getStore() > 0}">
                            <span style="color:green;margin-left:10px;"><i class="glyphicon glyphicon-ok">有货</i> </span>
                    </c:if>
                   <c:if test="${sessionScope.product.getStore() <= 0}">
                            <span style="color:red; margin-left:10px;"><i class="glyphicon glyphicon-remove">已卖完</i></span>
                   </c:if>
               </p>
               <ul>
                   <li><img src="../static/image/JD物流.png" width="100px" height="20px;"> <span>|</span></li>
                   <li>次日达 <span>|</span></li>
                   <li>送货上门 <span>|</span></li>
                   <li>免费上门取退 <span>|</span></li>
                   <li>可配送海外 <span>|</span></li>
                   <li>30天保价</li>
               </ul>
               <p style="color:red;clear:both;margin-top:40px;">温馨提示: <span style="color:gray;">支持7天无理由退款</span></p>
               <div id="computer">
                    <div style="display:flex;margin-top:30px;">
                        <h4 style="margin-right:30px;">下单数量</h4>
                        <button type="button" class="btn btn-info" onclick="operation('reduce')">-</button>
                        <input type="text" class="form-control" id="number" disabled value="1" style="width:200px;margin:0px 5px;">
                        <button type="button" class="btn btn-info" onclick="operation('add')">+</button>
                    </div>
               </div>
               <div style="margin-top:20px;margin-left:160px;">
                   <button type="button" class="btn btn-info" style="margin-right:10px;"
                           onclick="addCart(${sessionScope.user == null ? 0 : sessionScope.user.getId()},${sessionScope.product.getProductId()})">加入购物车</button>
                   <button type="button" class="btn btn-success">立即购买</button>
               </div>
           </div>
       </div>
        <p style="margin-top:10px;">
            <span style="color:red;margin-right:10px;cursor:pointer;"
            onclick="addWish(${sessionScope.product.getProductId()},${sessionScope.user.getId()})"><i class="glyphicon glyphicon-heart"></i> 收藏</span>
            <span style="color:red;cursor:pointer;"><i class="glyphicon glyphicon-paperclip"></i>分享</span>
        </p>

        <div id="bottom" style="margin-top:50px;">
            <ul class="nav nav-tabs">
                <li role="presentation" class="detailsNav active"><a href="#">商品详情</a></li>
                <li role="presentation" class="detailsNav"><a href="#">评论</a></li>
            </ul>

            <div class="box">
                <div  style="display: flex;flex-direction: column;align-items: center;margin-top:30px;">
                    <img src="${sessionScope.product.getDefaultImg()}">
                    <p style="margin-top:20px;">${sessionScope.product.getProductName()}</p>
                </div>
            </div>
            <div class="box" style="margin-top:30px;">
                <c:if test="${empty sessionScope.review}">
                    <p>暂无评论</p>
                </c:if>
                <c:forEach items="${sessionScope.review}" var="review">
                    <h4>${review.value.getNickName()}</h4>
                    <p class="reviewContext">${review.key}</p>
                </c:forEach>
            </div>
        </div>
    </div>
    <div class="tipBox"></div>
    <jsp:include page="Footer.jsp"></jsp:include>
<script src="${pageContext.request.contextPath}../js/tip.js"></script>
<script src="${pageContext.request.contextPath}../js/productJS.js"></script>
</body>
</html>
